<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>学生教师管理系统</title>
    <!-- 外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- Tailwind 配置 -->
    <style>
        @layer utilities {
            .card-shadow {
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            }

            /* 无缝循环滚动动画 */
            .animate-ticker {
                animation: ticker 10s linear infinite;
            }

            .animate-ticker-clone {
                animation: ticker-clone 10s linear infinite;
            }
        @layer utilities {
            @keyframes ticker {
                0% {
                    transform: translateX(0);
                }
                100% {
                    transform: translateX(-100%);
                }
            }

            @keyframes ticker-clone {
                0% {
                    transform: translateX(100%);
                }
                100% {
                    transform: translateX(0);
                }
            }
        }
    </style>

</head>
<body class="min-h-screen flex flex-col overflow-hidden">
<!-- 主内容容器 -->
<div class="relative z-10 flex flex-col min-h-screen">
    <!-- 导航栏将被渲染到这里 -->
    <div id="navbar-container"></div>

    <!-- 主内容区（由各模块填充） -->
    <main class="flex-grow container mx-auto px-4 py-8 pt-24">
        <!-- 模块内容将在这里显示 -->
    </main>

    <!-- 页脚将被渲染到这里 -->
    <div id="footer-container"></div>
</div>

<!-- 无缝循环滚动欢迎信息 -->
<div class="fixed top-1/2 left-0 right-0 transform -translate-y-1/2 z-50 pointer-events-none overflow-hidden"
     id="welcome-ticker">
    <div class="flex" id="ticker-wrapper">
        <div class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-primary whitespace-nowrap" id="ticker-content">
            🎉 欢迎使用学生信息管理系统 | 🎉 欢迎使用学生信息管理系统 | 🎉 欢迎使用学生信息管理系统
        </div>
        <div class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-primary whitespace-nowrap" id="ticker-content-clone">
            🎉 欢迎使用学生信息管理系统 | 🎉 欢迎使用学生信息管理系统 | 🎉 欢迎使用学生信息管理系统
        </div>
    </div>
</div>

<!-- 页脚模板（保留） -->
<template id="footer-template">
    <footer class="bg-gray-800/80 text-white py-6 backdrop-blur-sm">
        <div class="container mx-auto px-4">
            <div class="text-center">
                <p>© 2025 学生教师管理系统 | 版权所有</p>
            </div>
        </div>
    </footer>
</template>

<!-- 共用模态框：确认删除 -->
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden" id="confirmDeleteModal">
    <div class="bg-white rounded-lg shadow-xl w-full max-w-md transform transition-all">
        <div class="bg-danger p-4 rounded-t-lg">
            <h3 class="text-white text-lg font-bold flex items-center">
                <i class="fa fa-trash mr-2"></i> 确认删除
            </h3>
        </div>
        <div class="p-6">
            <p class="text-gray-700 mb-6" id="deleteMessage">你确定要删除此记录吗？此操作不可撤销。</p>
            <div class="flex justify-end space-x-4">
                <button class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300 transition-colors" id="cancelDelete"
                        type="button">取消
                </button>
                <button class="px-4 py-2 bg-danger text-white rounded-md hover:bg-danger/90 transition-colors" id="confirmDelete"
                        type="button">确认删除
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 共用通知提示 -->
<div class="fixed top-4 right-4 max-w-xs bg-white rounded-lg shadow-lg overflow-hidden transform translate-x-full transition-transform duration-500 z-50"
     id="notification"
     style="right: -100%;">
    <div class="p-3 bg-primary text-white flex justify-between items-center" id="notificationHeader">
        <h3 class="font-medium" id="notificationTitle">通知</h3>
        <button class="text-white hover:text-gray-200 transition-colors" id="closeNotification">
            <i class="fa fa-times"></i>
        </button>
    </div>
    <div class="p-4">
        <p id="notificationMessage"></p>
    </div>
</div>

<!-- 引入css -->
<link href="../css/style.css" rel="stylesheet">
<!-- 引入共用JS -->
<script src="../js/index.js"></script>
<script src="../js/style.js"></script>
</body>
</html>